<template>
  <div>
    <el-popover ref="pop" v-model="pop" placement="right" width="300" trigger="click">
      <el-row v-if="clearable" type="flex" justify="end" class="d2-mb-10" style="margin-bottom: 10px">
        <el-button type="warning" icon="el-icon-close" size="mini" class="d2-fr" @click="close">
          关闭
        </el-button>
      </el-row>
      <el-input v-model="searchText" :clearable="true" placeholder="搜索 比如 'plus'" prefix-icon="el-icon-search" />
      <el-collapse v-if="!searchMode" v-model="collapseActive" class="d2-icon-select--group">
        <el-collapse-item
          v-for="(item, index) in icon"
          :key="index"
          :title="item.title"
          :name="index"
          class="d2-icon-select--class"
        >
          <el-row class="d2-icon-select--class-row">
            <el-col
              v-for="(iconName, iconIndex) in item.icon"
              :key="iconIndex"
              class="d2-icon-select--class-col"
              :span="4"
              @click.native="selectIcon(iconName)"
            >
              <i :class="'fa fa-' + iconName" />
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <div v-if="searchMode" class="d2-icon-select--group">
        <div v-for="(item, index) in iconFilted" :key="index" class="d2-icon-select--class">
          <div class="d2-icon-select--class-title">
            {{ item.title }}
          </div>
          <el-row class="d2-icon-select--class-row">
            <el-col
              v-for="(iconName, iconIndex) in item.icon"
              :key="iconIndex"
              class="d2-icon-select--class-col"
              :span="4"
              @click.native="selectIcon(iconName)"
            >
              <i :class="'fa fa-' + iconName" />
            </el-col>
          </el-row>
        </div>
      </div>
    </el-popover>
    <el-input v-model="menuForm.icon" v-bind="bind" style="width: 100%" @click.native="pop= true">
      <template #prepend>
        <i :class="'fa fa-' + menuForm.icon" />
      </template>
      <el-button v-popover:pop>
        <template #append>
          <i class="fa fa-list" />
        </template>
      </el-button>
    </el-input>
  </div>
</template>
<script>
import icon from './index'
export default {
  props: {
    value: {
      type: [String, undefined],
      required: true
    }
  },
  emits: ['input'],
  data: vm => ({
    clearable: true,
    pop: false,
    // 查询的文字
    searchText: '',
    // 不是查询的时候显示的折叠面板绑定的展开数据
    collapseActive: [],
    icon,
    menuForm: {
      appId: '', // 应用标识
      appSubId: '', // 子应用标识
      code: '', // 菜单编码
      description: '', // 备注
      enabled: '', // 是否可用
      icon: '', // 菜单图标
      level: '', // 菜单级数
      name: '', // 菜单名称
      parentId: '', // 父级ID
      prefix: '', // 路径前缀
      target: '', // 打开方式：0-窗口内 1-新窗口
      url: '', // 菜单路径
      weight: '' // 优先级：越小越靠前,默认值:500
    },
    autoClose: true
  }),
  computed: {
    // 输入框上绑定的设置
    bind () {
      return {
        placeholder: this.placeholder,
        clearable: this.clearable,
        ...this.$attrs
      }
    },
    // 是否在查询
    searchMode () {
      return !!this.searchText
    },
    // 过滤后的图标
    iconFilted () {
      return this.icon
        .map(iconClass => ({
          title: iconClass.title,
          icon: iconClass.icon.filter(icon => icon.indexOf(this.searchText) >= 0)
        }))
        .filter(iconClass => iconClass.icon.length > 0)
    }
  },
  watch: {
    value: function () {
      this.menuForm.icon = this.value
    }
  },
  created () {
    this.menuForm.icon = this.value
  },
  methods: {
    selectIcon (iconName = '') {
      this.$emit('input', iconName)
      if (iconName && this.autoClose) {
        this.pop = false
        this.menuForm.icon = iconName
      } else {
        this.menuForm.icon = ''
      }
    },
    close () {
      this.pop = false
    }
  }
}
</script>
